<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>VueComponent</title>
  <script src="../js/vue.js"></script>
</head>
<body>

  <div id="root">
    <school></school>
  </div>

  <script type='text/javascript'>

      const school = Vue.extend({

         template:`
            <div>
               学校：{{name}}
               <br></br>
               地址：{{address}}
               <br></br>
            </div>  
         `,
         data(){
            return {
               name:'尚硅谷',
               address:'北京昌平'
            }
         },
      })

      console.log(school.prototype.__proto__ ==  Vue.prototype);// true

      /**
       * (1) 组件实例vc原型对象的隐式原型 等于 Vue实例vm的原型对象
       * 这么做的目的就是 让组件实例vc也能够 访问vm原型对象上的资源(属性方法)
       * 因为vm上的资源很丰富，这样的话vc也可以获取了
      */
      new Vue({
          template:`<school></school>`,
          el:'#root',
          components:{school}
      })
  </script>
</body>
</html>